<!-- 查询任务 -->
<template>
    <div class="app-container page-content-body">
      <el-form :class="['search-container', isShowSearch ? 'active' : '']" :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
        <el-form-item label="快递公司" prop="type">
          <el-select
            v-model="queryParams.deliverId"
            filterable
            remote
            reserve-keyword
            placeholder="请输入快递公司名称"
            :remote-method="onGetDeliverList"
            :loading="isLoadingDeliverList"
          >
            <el-option
              v-for="item in deliverList"
              :key="item.delivery_id"
              :label="item.delivery_name"
              :value="item.delivery_id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="常用快递" prop="historyStr">
          <el-input v-model="queryParams.historyStr" @keyup.enter.native="handleQuery" :clearable="true" placeholder="请输入" readonly/>
        </el-form-item>

        <el-form-item label="备注" prop="poleCode">
          <el-input v-model="queryParams.poleCode" @keyup.enter.native="handleQuery" :clearable="true" placeholder="请输入"/>
        </el-form-item>
        
        <div class="lz-margin-bottom-0 lz-margin-left-18 btn-group">
          <el-button class="btn" type="text" size="small" @click="handleToggleSearch" v-if="searchFullHeight > 52">
            {{isShowSearch ? '收起' : '展开'}}
            <i :class="[isShowSearch ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i>
          </el-button>
          <el-button size="small" type="primary" class="btn" @click="handleQuery">查询</el-button>
        </div>
      </el-form>

      <div class="table-container">
        <div class="table-operation">
          <div class="left-module">
            <el-button class="btn" type="primary" icon="el-icon-plus" @click="handleAdd" size="small" v-hasPermi="[authKeyList.addRoadDevice]">新增</el-button>
          </div>
          <div class="right-module">
            <el-button class="btn btn-icon" icon="el-icon-refresh" @click="handleRefresh"></el-button>
          </div>
        </div>
        <el-table 
            v-loading="loading" 
            :data="dataList" 
            @select="handleSelect" 
            @selection-change="handleSelectionChange" 
            @select-all="handleSelect" 
            :height="`calc(100vh - 238px - ${currentSearchHeight}px)`"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="单号" prop="delivery_id" />
          <el-table-column label="轨迹数量" prop="like_num">
            <template slot-scope="scope">
              {{ scope.row.like_num ? scope.row.like_num : '-' }}
            </template>
          </el-table-column>
          <el-table-column label="最新状态" prop="delivery_status">
            <template slot-scope="scope">
              {{ scope.row.delivery_status ? scope.row.delivery_status : '-' }}
            </template>
          </el-table-column>
          <el-table-column label="最新时间" prop="orgName">
            <template slot-scope="scope">
              {{ scope.row.orgName ? scope.row.orgName : '-' }}
            </template>
          </el-table-column>
          <el-table-column label="最新城市" prop="poleCode">
            <template slot-scope="scope">
              {{ scope.row.poleCode ? scope.row.poleCode : '-' }}
            </template>
          </el-table-column>
          <el-table-column label="最新轨迹" prop="systemCode">
            <template slot-scope="scope">
              {{ scope.row.systemCode ? scope.row.systemCode : '-' }}
            </template>
          </el-table-column>
          <el-table-column label="正在派送" prop="status">
            <template slot-scope="scope">
              {{ getLabelInfoByValue(scope.row.status, 'deviceStatus').label }}
            </template>
          </el-table-column>
        </el-table>
        <div class="table-bottom">
          <div class="batch-operation">
            <span class="base-info">已选{{ selectedList.length }}条|批量操作</span>
          </div>
          <pagination align="right" layout="total, sizes, prev, pager, next" v-show="total > 0" :total="total"
          :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" next-text="下一页"
          prev-text="上一页" />
        </div>
      </div>


    </div>
  </template>
  <!--vue -->
  <script>
  import { getDeliveryCompanyList, getDeliveryHistory } from "@/api/group/base";
  import { 
    getUserButtons, getAllButtons, getUserTabs, getAllTabs, getUserFields, getAllFields 
  } from '@/api/group/searchTask';
  export default {
    components: { 
      
    },
    dicts: [],
    data() {
      return {
        form: {},
        title: '',
        // 遮罩层
        loading: false,
        // 总条数
        total: 1,
        ids: [],
        idsName: [],
        roadDeviceList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          historyStr: '',
          type: "",
        },
        deleteButType: true, //删除按钮显示状态
        selectedList: [], //删除多个数组
        testPoint: [],
        sort: "1", //根据时间排序
        testTargetList: [],

        deliverList: [],
        isLoadingDeliverList: false,

        isShowSearch: true,
        searchFullHeight: 52,
        currentSearchHeight: 52,

        userButtonList: [],
        userTabList: [],

        //列表
        loading: false,
        dataList: [],

      };
    },
    //生命周期函数
    mounted() {
        // this.getList();
        this.handleGetHeight();
        this.onGetUserHistoryList();
        this.onGetUserButtons();
        this.onGetUserTabs();
    },
    created() {
    },
    //调用方法
    methods: {
      //获取所有buttons
      onGetAllButtons() {
        getAllButtons().then(res => {
          
        })
      },
      //获取用户buttons
      onGetUserButtons() {
        getUserButtons().then(res => {
          console.log(res, '<========res')
        })
      },
      //获取用户tabs
      onGetUserTabs() {
        getUserTabs().then(res => {
          console.log(res, '<========res')
        })
      },
      //获取用户历史快递列表
      onGetUserHistoryList() {
        this.loading = true
        getDeliveryHistory().then(res => {
          this.loading = false
          this.dataList = res?.data;
        })
      },
      //获取快递公司列表
      onGetDeliverList(value) {
        getDeliveryCompanyList({
          page: 1,
          limit: 100,
          keyword: value
        }).then(res => {
          this.deliverList = res?.data;
        })
      },
      handleGetHeight() {
        this.searchFullHeight = this.$refs.queryForm.$el.offsetHeight;
        this.$nextTick(() => {
          this.isShowSearch = false;
          this.currentSearchHeight = 52;
        })
      },
      handleToggleSearch() {
        this.isShowSearch = !this.isShowSearch;
        this.currentSearchHeight = this.isShowSearch ? this.searchFullHeight : 52;
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.id);
        this.idsName = selection.map((item) => item.patrolId);
      },
      // 选中设置删除按钮状态
      handleSelect(selection, rows) {
        this.selectedList = selection;
      },
      /** 新增按钮操作 */
      handleAdd() {
        
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      handleRefresh() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          code: '',
          type: "",
          status: [],
          orgId: '',
          name: "",
          orgName: ''
        };
        this.getList();
      },
      /** 查询任务列表 */
      getList() {
        this.loading = true;
        getRoadDeviceList(this.queryParams).then(res => {
          this.selectedList = [];
          this.loading = false;
          this.roadDeviceList = res?.data?.records;
          this.total = res?.data?.total;
        })
      },
      handleEdit(row) {
        
      }
    }
  };
  </script>
